<template>
  <div>
    <div class="dashboard" v-if="userRole != '广告代理商'">
      <div class="dashboard-information">
        <div class="dashboard-boxs" @click="selectEC(0)">
          <div>
            <img src="../../assets/icon/user.png">
          </div>
          <div>
            <div class="dashboard-text">总用户数</div>
            <div class="dashboard-num">{{ list1.totalNum }}</div>
          </div>
        </div>
        <div class="dashboard-boxs" @click="selectEC(1)">
          <div>
            <img src="../../assets/icon/user.png">
          </div>
          <div>
            <div class="dashboard-text">总会员数</div>
            <div class="dashboard-num">{{ list.totalMemberNum }}</div>
          </div>
        </div>
        <div class="dashboard-boxs" @click="selectEC(2)">
          <div>
            <img src="../../assets/icon/active.png">
          </div>
          <div>
            <div class="dashboard-text">每日新增人数</div>
            <div class="dashboard-num">{{ list.todayNewAddUser }}</div>
          </div>
        </div>
        <!-- <div class="dashboard-boxs">
        <div>
          <img src="../../assets/icon/active.png">
        </div>
        <div>
          <div class="dashboard-text">每日活跃量</div>
          <div class="dashboard-num">2</div>
        </div>
      </div> -->
        <div class="dashboard-boxs" @click="selectEC(3)">
          <div>
            <img src="../../assets/icon/Income.png">
          </div>
          <div>
            <div class="dashboard-text">累计收入</div>
            <div class="dashboard-num">{{ list.totalIncome }}</div>
          </div>
        </div>
        <div class="dashboard-boxs" @click="selectEC(4)">
          <div>
            <img src="../../assets/icon/Cash.png">
          </div>
          <div>
            <div class="dashboard-text">累计提现</div>
            <div class="dashboard-num">{{ list.totalWithdrawal }}</div>
          </div>
        </div>

        <div class="dashboard-boxs">
          <div>
            <img src="../../assets/icon/vv.png">
          </div>
          <div>
            <div class="dashboard-text">总视频数</div>
            <div class="dashboard-num">{{ list.totalDynamicNum }}</div>
          </div>
        </div>
        <div class="dashboard-boxs">
          <div>
            <img src="../../assets/icon/v_add.png">
          </div>
          <div>
            <div class="dashboard-text">每日新增视频数</div>
            <div class="dashboard-num">{{ list.todayNewAddDynamicNum }}</div>
          </div>
        </div>
        <div class="dashboard-boxs">
          <div>
            <img src="../../assets/icon/v_add.png">
          </div>
          <div>
            <div class="dashboard-text">电商商家数</div>
            <div class="dashboard-num">{{ list.onlineShopUserNum }}</div>
          </div>
        </div>
        <div class="dashboard-boxs">
          <div>
            <img src="../../assets/icon/v_add.png">
          </div>
          <div>
            <div class="dashboard-text">团购商家数</div>
            <div class="dashboard-num">{{ list.groupShopUserNum }}</div>
          </div>
        </div>
        <div class="dashboard-boxs">
          <div>
            <img src="../../assets/icon/v_add.png">
          </div>
          <div>
            <div class="dashboard-text">一级代理商数量</div>
            <div class="dashboard-num">{{ list.oneLeverAdvertisementUserNum }}</div>
          </div>
        </div>
        <div class="dashboard-boxs">
          <div>
            <img src="../../assets/icon/v_add.png">
          </div>
          <div>
            <div class="dashboard-text">二级代理商数量</div>
            <div class="dashboard-num">{{ list.secondLeverAdvertisementUserNum }}</div>
          </div>
        </div>
        <div class="dashboard-boxs">
          <div>
            <img src="../../assets/icon/v_add.png">
          </div>
          <div>
            <div class="dashboard-text">每日新增商家</div>
            <div class="dashboard-num">{{ list.newShopUserOfDay }}</div>
          </div>
        </div>
        <div class="dashboard-boxs">
          <div>
            <img src="../../assets/icon/v_add.png">
          </div>
          <div>
            <div class="dashboard-text">每日新增代理商</div>
            <div class="dashboard-num">{{ list.newAdvertisementUserOfDay }}</div>
          </div>
        </div>
      </div>
      <div style="margin-top: 5%;">
        <!-- <div style="width: 30%;"> -->
        <div v-show="showEC1" ref="myEchart1" style="height: 500px;">
        </div>
        <!-- </div> -->
        <div class="sort" v-show="idx == 0">
          <div class="sort_item">
            <div v-for="(item, index) in sortList" :key="item.name">
              {{ index + 1 }} - {{ item.name }} - {{ item.value }}人
            </div>
          </div>
        </div>
        <!-- <div style="position: relative;"> -->
        <div v-show="idx == 0" ref="myEchart11" style="height: 500px;">
        </div>
        <!-- </div> -->
        <div style="height: 200px;"></div>
      </div>


      <div class="block" v-show="showEC2" style="margin-top: 50px;">
        <span class="demonstration">请选择月份：</span>
        <el-date-picker value-format="yyyy-M" v-model="value" type="month" placeholder="选择月" @change="changeMonth">
        </el-date-picker>
      </div>
      <div v-show="showEC2" ref="myEchart2" style="height: 350px;margin-top: 5%;">
      </div>
    </div>
    <el-dialog :close-on-click-modal='false' :close-on-press-escape='false' :show-close="false"
      custom-class="classDialog" :visible="visibleRecharge" @close="visibleRecharge = false" width="25%">
      <depositMoney @successPay="successPay"></depositMoney>
    </el-dialog>
  </div>
</template>

<script>
import depositMoney from '@/components/depositMoney/depositMoney';
import {
  mapGetters
} from 'vuex'
import * as echarts from '../../utils/echarts.js';




export default {
  name: 'Dashboard',
  components: {
    depositMoney
  },
  computed: {
    ...mapGetters([
      'name',
      'userRole'
    ])
  },
  data() {
    return {
      visibleRecharge: false,
      idx: 0,
      showEC1: false,
      showEC2: false,
      list: [],
      list1: [],
      data: [{
        value: 70,
        name: '男'
      },
      {
        value: 50,
        name: '女'
      },
      ],
      value: '',
      information: '',
      informationName: '',
      sortList: [],
      visibleRecharge: false,
    }
  },
  mounted() {
    if (this.userRole == '广告代理商') {
      let advertisementUserMes = JSON.parse(localStorage.getItem('advertisementUserMes'))
      if (advertisementUserMes.payableDepositMoney > advertisementUserMes.realityDepositMoney) {
        this.$message('该账号的押金还没缴交，请缴交')
        this.visibleRecharge = true
      }
    }
    // window.addEventListener('resize', () => {
    //     myChart1.resize();
    // }, false); // false代表事件句柄在冒泡阶段执行


    // this.data[1].value = 999
    // this.initChart1(this.data)
    // this.initChart2()
    let date_ = new Date();
    let seperator1 = "-";
    let year = date_.getFullYear();
    let month = date_.getMonth() + 1;
    // console.log(year + seperator1 + month)
    this.nowM = year + seperator1 + month
    this.nowM1 = year + seperator1 + month

    this.PCHomePageStatistics()
    this.PCHomeProvinceUser()
    this.genderRatio()


  },
  methods: {
    successPay() {
      this.visibleRecharge = false
      this.getAdvertisementUserMes()
    },
    async getAdvertisementUserMes() {
      let res = await this.$API.members.getAdvertisementUserMes({
        advertisementUserId: JSON.parse(localStorage.getItem('advertisementUserMes')).advertisementUserId
      })
      console.log('代理商信息', res)
      localStorage.setItem('advertisementUserMes', JSON.stringify(res.data))
    },



    changeMonth(e) {
      console.log(e)
      this.nowM = e
      this.PCHomePageStatistics()
    },

    async PCHomePageStatistics() {
      let res = await this.$API.dashboard.PCHomePageStatistics({
        dayTime: this.nowM
      })
      this.list = res.data
      if (this.at) {
        const inarr = [];
        const inarr2 = [];
        for (let i = 0; i < res.data.incomeList.length; i++) {
          inarr.push(res.data.incomeList[i].dayNum)
          inarr2.push(res.data.incomeList[i].money)
        }

        setTimeout(() => {
          this.initChart2('收入', inarr, inarr2)
        }, 500)
      }
      if (this.at2) {
        const wiarr = [];
        const wiarr2 = [];
        for (let i = 0; i < res.data.withdrawalList.length; i++) {
          wiarr.push(res.data.withdrawalList[i].dayNum)
          wiarr2.push(res.data.withdrawalList[i].money)
        }
        setTimeout(() => {
          this.initChart2('提现', wiarr, wiarr2)
        }, 500)

      }


    },

    async genderRatio() {
      let res = await this.$API.dashboard.genderRatio()
      this.list1 = res.data
      this.selectEC(0)
    },

    async PCHomeProvinceUser() {
      let res = await this.$API.dashboard.PCHomeProvinceUser()
      console.log(res)
      this.information = res.data.map(item => {
        return {
          name: item.province,
          value: item.num
        }
      })
      this.informationName = res.data.map(item => {
        return item.province
      });

      this.sortList = res.data.map(item => {
        return {
          name: item.province,
          value: item.num
        }
      }).sort(this.compare("value"))
      // console.log(this.sortList)
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      }
    },


    selectEC(index) {
      this.idx = index
      this.showEC1 = false
      this.showEC2 = false
      this.at = false
      this.at2 = false


      if (index == 0) {
        this.showEC1 = true
        this.data[0].value = this.list1.manNum
        this.data[1].value = this.list1.womanNum
        setTimeout(() => {
          this.initChart1('总用户', this.data)
          this.initChartProvinceUser('各省份')
        }, 500)
      } else if (index == 1) {
        this.showEC1 = true
        this.data[0].value = this.list.manMemberNum
        this.data[1].value = this.list.womanMemberNum
        setTimeout(() => {
          this.initChart1('会员用户', this.data)
        }, 500)

      } else if (index == 2) {
        this.showEC1 = true
        this.data[0].value = this.list.manNewAddNum
        this.data[1].value = this.list.womanNewAddNum
        console.log(this.data)
        setTimeout(() => {
          this.initChart1('新增用户', this.data)
        }, 500)
      } else if (index == 3) {
        this.PCHomePageStatistics()
        this.showEC2 = true
        this.at = true
        this.nowM = this.nowM1
        this.value = this.nowM1

      } else if (index == 4) {
        this.PCHomePageStatistics()
        this.showEC2 = true
        this.at2 = true
        this.nowM = this.nowM1
        this.value = this.nowM1
      }
    },
    initChart1(title, data) {
      let myChart = echarts.init(this.$refs.myEchart1);

      window.addEventListener('resize', () => {
        myChart.resize();
      }, false);

      let option = {
        color: ['#40cdc5', '#ffc0cb'],
        title: {
          text: title + '男女用户比例',
          // subtext: '用户',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '20%'
        },
        label: {
          formatter: function (data) {
            return `${data.name} ${data.value}
          	(${data.percent.toFixed(1)}%)`
          }
        },
        series: [{
          name: '数据详情',
          type: 'pie',
          radius: '50%',
          data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      myChart.setOption(option);
    },

    initChartProvinceUser(title) {
      let myChart = echarts.init(this.$refs.myEchart11);

      window.addEventListener('resize', () => {
        myChart.resize();
      }, false);

      let option = {
        // color: ['#40cdc5', '#ffc0cb'],
        title: {
          text: title + '用户比例',
          // subtext: '用户',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // type: 'scroll',
          orient: 'vertical',
          right: 40,
          top: 20,
          bottom: 20,
          data: this.informationName
          // orient: 'vertical',
          // left: '35%',
          // data: this.informationName
        },
        label: {
          formatter: function (data) {
            return `${data.name} ${data.value}
          	(${data.percent.toFixed(1)}%)`
          }
        },
        series: [{
          name: '数据详情',
          type: 'pie',
          radius: '50%',
          data: this.information,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      myChart.setOption(option);
    },

    initChart2(title, dataX, dataY) {
      let myChart2 = echarts.init(this.$refs.myEchart2);
      window.addEventListener('resize', () => {
        myChart2.resize();
      }, false);
      let option = {
        title: {
          text: this.nowM + title,
          // subtext: '用户',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: dataX,
          name: '月份',
        },
        yAxis: {
          name: '金额/元',
          type: 'value'
        },
        legend: {
          orient: 'vertical'
        },
        series: [{
          data: dataY,
          type: 'line',
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            }
          }
        }]
      };
      myChart2.setOption(option);
    },


  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  font-size: 14px;
  height: 100%;

  &-information {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin: 0 30px;
    flex-wrap: wrap;
  }

  &-boxs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f3f5f7;
    margin-top: 20px;
    margin-right: 40px;
    width: 17%;
    padding: 25px 25px;

    img {
      width: 40px;
      height: 40px;
    }
  }

  &-text {
    margin-bottom: 10px;
    font-size: 17px;
  }

  &-num {
    font-weight: 700;
    font-size: 16px;
  }

  &-chart {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 450px;
    margin-top: 30px;
  }

  &-font {
    font-size: 32px;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
  }

  &-statistics {
    background: white;
    padding: 25px;
    width: 30%;
    height: 100%;
  }

  &-proportion {
    background: white;
    padding: 25px;
    width: 30%;
    height: 100%;
  }
}


.sort {
  width: 28%;
  height: 350px;
  position: relative;
  top: 420px;
  left: 40px;
  margin-top: -220px;

  .sort_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}
</style>
